<!doctype html>
<meta charset="utf-8" />
<meta name="author" title="Luke Warlow" href="mailto:lwarlow@igalia.com" />
<link rel="help" href="https://open-ui.org/components/invokers.explainer/" />
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/resources/testdriver.js"></script>
<script src="/resources/testdriver-actions.js"></script>
<script src="/resources/testdriver-vendor.js"></script>
<script src="resources/invoker-utils.js"></script>

<input type="number" id="invokee" value="0">
<button id="invokerbutton" commandfor="invokee"></button>

<script>
  function reset() {
    invokee.value = 0;
    invokerbutton.removeAttribute('command');
  }

  // stepUp

  promise_test(async function (t) {
    t.add_cleanup(reset);
    assert_equals(invokee.valueAsNumber, 0);
    invokerbutton.setAttribute("command", "stepup");
    await clickOn(invokerbutton);
    assert_equals(invokee.valueAsNumber, 1);
  }, "invoking number input with stepup action increments value");

  promise_test(async function (t) {
    t.add_cleanup(reset);
    assert_equals(invokee.valueAsNumber, 0);
    invokerbutton.setAttribute("command", "sTePuP");
    await clickOn(invokerbutton);
    assert_equals(invokee.valueAsNumber, 1);
  }, "invoking number input with stepup action (case-insensitive) increments value");

  promise_test(async function (t) {
    t.add_cleanup(reset);
    assert_equals(invokee.valueAsNumber, 0);
    invokerbutton.setAttribute("command", "stepup");
    invokee.addEventListener("command", (e) => e.preventDefault(), {
      once: true,
    });
    await clickOn(invokerbutton);
    assert_equals(invokee.valueAsNumber, 0);
  }, "invoking number input with stepup action and preventDefault does not increment value");

  // stepDown

  promise_test(async function (t) {
    t.add_cleanup(reset);
    assert_equals(invokee.valueAsNumber, 0);
    invokerbutton.setAttribute("command", "stepdown");
    await clickOn(invokerbutton);
    assert_equals(invokee.valueAsNumber, -1);
  }, "invoking number input with stepdown action decrements value");

  promise_test(async function (t) {
    t.add_cleanup(reset);
    assert_equals(invokee.valueAsNumber, 0);
    invokerbutton.setAttribute("command", "sTePdOwN");
    await clickOn(invokerbutton);
    assert_equals(invokee.valueAsNumber, -1);
  }, "invoking number input with stepdown action (case-insensitive) decrements value");

  promise_test(async function (t) {
    t.add_cleanup(reset);
    assert_equals(invokee.valueAsNumber, 0);
    invokerbutton.setAttribute("command", "stepdown");
    invokee.addEventListener("command", (e) => e.preventDefault(), {
      once: true,
    });
    await clickOn(invokerbutton);
    assert_equals(invokee.valueAsNumber, 0);
  }, "invoking number input with stepdown action and preventDefault does not decrement value");
</script>
